<template>
	<div id="recommend">
		<swiper v-bind:bannerlist = "bannerlist"></swiper>
		<div class="view1">
			<img src="../../../assets/image/2018011022292984819.png" alt="">
			<img src="../../../assets/image/2018011022292372054.png" alt="">
			<img src="../../../assets/image/2018011022291629252.png" alt="">
			<img src="../../../assets/image/2018011022290460400.png" alt="">
		</div>
		<div class="view2 overfl">
			<img src="../../../assets/image/2018011114551289342.png" alt="" class="fl" @click="linkToPage('10')">
			<img src="../../../assets/image/e2ad0dbf777fda097e55cea9ce716e33.jpg" alt="" class="fr" @click="linkToPage('04')">
			<img src="../../../assets/image/2018011114550596671.png" alt="" class="fr mt-2" @click="linkToPage('11')">
		</div>
		<div class="view4">
			<img src="../../../assets/image/a589d24e74c4d96191dd46635054e804.jpg" alt="" class="width_img mt-2">
			<img src="../../../assets/image/2018011115034174111.png" alt="" class="width_img">
		</div>
		<div class="view3">
			<img src="../../../assets/image/2018011115033089933.png" alt="" class="width_img">
			<ul>
				<li v-for="item in recprod" class="mb-10" @click="linkToPage(item.href)">
					<img v-lazy="item.src" alt="" class="width_img">
					<div class="recprod_tex">
						<p class="pl-10 fs-14">{{item.title}}</p>
						<p class="pl-10 fs-12">{{item.con}}</p>
						<p class="pl-10 fs-16">{{item.money | money}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import swiper from '../../../components/swiper/swiper'
	export default {
		name:"recommend",
		data(){
			return {
				bannerlist:[],
				recprod:[],
			}
		},
		components:{
			"swiper" : swiper
		},
		methods: {
			
		},	
		created(){
			var that = this ;
			this.$http.get("../../../mishop/static/itemJson/banner1.json").then(res => {
				this.bannerlist = res.body
			})
			this.$http.get("../../../mishop/static/itemJson/recprod.json").then(res => {
				this.recprod = res.body
				//console.log(res.body)
			})
		},
	}
</script>

<style scoped>
	.view1{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}
	.view1 img{
		width: 25%;
		height: 79px;
	}
	.view2 img{
		width: 49.5%;
	}
	.view3 ul{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}
	.view3 ul li{
		width: 49%;
	}
</style>